<template>
    <div class="home">
        <p>我接下来放一张图片</p><p><img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/117.jpg?2" alt="百度首页背景" data-href="https%3A%2F%2Fdss2.bdstatic.com%2FlfoZeXSm1A5BphGlnYG%2Fskin%2F117.jpg%3F2" style="max-width:100%;" contenteditable="false" width="30%"/></p><p>上面是我放置的图片。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end。</p>
        <hr>
        <p>😁<br/></p>
        <hr>
        <h3>wangEditor with vue</h3>
        <div id="demo1"></div>
        <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
        <h3>内容预览</h3>
        <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
    </div>
</template>

<script>
    // 引入 wangEditor
    import wangEditor from 'wangeditor'

    export default {
        name: "wangEditor",
        data() {
            return {
                editor: null,
                editorData: ''
            }
        },
        mounted() {
            const editor = new wangEditor(`#demo1`)

            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.editorData = newHtml
            }

            // /*使用 base64 格式保存图片。即，可选择本地图片  */
            // editor.config.uploadImgShowBase64 = true;
            // editor.config.uploadImgServer = 'http://localhost:8081/editor/uploadImage'
            editor.config.uploadImgServer = this.GLOBAL.serverBaseUrl + this.GLOBAL.editorUpdImg;
            // 创建编辑器
            editor.create()

            this.editor = editor
        },
        methods: {
            getEditorData() {
                // 通过代码获取编辑器内容
                // let data = this.editor.txt.html();  //获取纯 html  即使不输入内容 你单单只选择一些样式 它也包含一些标签，内容不为空
                let data = this.editor.txt.text();  //获取纯文本信息  即使你选择一些样式 不输入实际内容  他也为空
                // if (data === ''){
                //     alert("内容为空！");
                // }else
                //     alert("not null: " + data);
                alert(data)
            }
        },
        beforeDestroy() {

            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy()
            this.editor = null
            console.log("我离开了此页面");
            alert("我离开了此页面");
            let i = true;
            while (i){
                let j = 0;
                j++;
                if (j === 100){
                    j++;
                }
            }
        }
    }
</script>

<style scoped>
    .home {
        width: 1200px;
        margin: auto;
        position: relative;
    }
    .btn {
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px 10px;
        cursor: pointer;
    }
    h3 {
        margin: 30px 0 15px;
    }

</style>